<script setup lang="ts">
import { EOrderAlarmType, EOrderAppointState, EOrderErrorState, EOrderPayWay, EOrderType } from '@/enum';
import usePlayAudio from '@/hooks/usePlayAudio';
import useToast from '@/hooks/useToast';

const props = defineProps<{ data: IOrderDetailInfo }>();
const { showToast } = useToast();
const { isPlaying, playAudio, stopAudio } = usePlayAudio();
const audioKey = ref<string>('');

onUnmounted(() => {
  stopAudio;
});

const copyContent = () => {
  uni.setClipboardData({
    data: props.data.orderNo,
    success: () => {
      showToast('复制成功', 'success');
    },
  });
};

// 处理图片预览
const handlePreviewImg = (index: number, type: string, tUrls?: string[]) => {
  uni.previewImage({
    urls: type === 'form' ? tUrls! : props.data!.urls,
    current: index,
  });
};

// 语音播放控制
const handleVoicePlayControl = (url: string, key: string) => {
  if (audioKey.value === key) {
    audioKey.value = '';
    stopAudio();
  } else {
    audioKey.value = key;
    playAudio(url);
  }
};

// 过滤状态
const badgeAppointmentStateShow = (type: number) => {
  switch (type) {
    case 1:
      return 'default';
    case 3:
      return 'danger';
    case 5:
      return 'success';
    case 7:
      return 'default';
  }
};
</script>

<template>
  <view class="mb-3">
    <!-- url集合图片 -->
    <view v-if="props.data.urls.length > 0" class="mb-3 c-br c-pd bg-white overflow-scroll">
      <view class="flex w-max">
        <image class="w-20 h-20 mr-3 flex-shrink-0 c-br" v-for="(item, index) in props.data.urls" :key="index" mode="aspectFill" :src="item" @click="handlePreviewImg(index, 'img')" />
      </view>
    </view>

    <van-cell-group inset>
      <van-cell v-if="props.data.orderTag" title="订单标识" use-label-slot>
        <view slot="right-icon" class="c-red">
          {{ props.data.orderTag === '1' ? '新用户下单' : '新用户下单加急' }}
        </view>
      </van-cell>
      <van-cell v-if="props.data.orderRemark" title="备注" :value="props.data.orderRemark" use-label-slot />
      <van-cell v-if="props.data.voiceRemark" use-label-slot title="用户语音备注">
        <view slot="right-icon">
          <van-button icon="volume-o" type="primary" size="mini" @click="handleVoicePlayControl(props.data.voiceRemark, 'voiceRemark')">{{ audioKey === 'voiceRemark' && isPlaying ? '停止' : '播放' }}</van-button>
        </view>
      </van-cell>
      <van-cell v-if="props.data.businessVoice" use-label-slot title="商户语音备注">
        <view slot="right-icon">
          <van-button icon="volume-o" type="primary" size="mini" @click="handleVoicePlayControl(props.data.businessVoice, 'businessVoice')">{{ audioKey === 'businessVoice' && isPlaying ? '停止' : '播放' }}</van-button>
        </view>
      </van-cell>
      <van-cell use-label-slot v-if="props.data.appointmentState" title="预约状态">
        <view slot="right-icon">
          <van-tag class="mr-2" :type="badgeAppointmentStateShow(props.data.appointmentState)">{{ EOrderAppointState[props.data.appointmentState] }}</van-tag>
        </view>
      </van-cell>
      <van-cell title="呼叫器" :value="props.data.beeperName" />
      <van-cell title="联系人" :value="props.data.linkName" />
      <van-cell title="联系电话" :value="props.data.phone" />
      <van-cell title="详细地址" :value="props.data.fullAddress" />
      <van-cell title="服务员" v-if="props.data.waiterName" :value="props.data.waiterName" />
      <van-cell title="订单编号" use-label-slot>
        <view slot="right-icon" class="flex items-center">
          <text class="c-text-color-grey font-size-3 mr-1">{{ props.data.orderNo }}</text>
          <van-button type="primary" size="mini" @click="copyContent">复制</van-button>
        </view>
      </van-cell>
      <van-cell title="订单类型" :value="EOrderType[props.data.orderType]" />
      <van-cell v-if="props.data.orderType === 8" title="报警类型" :value="EOrderAlarmType[props.data.alarmType as keyof typeof EOrderAlarmType]" />
      <van-cell v-if="props.data.orderType === 8" title="报警地址" :value="props.data.currentAddress" />
      <van-cell v-if="props.data.orderType === 3" title="计时类型" :value="props.data.timingType === 1 ? '固定时长' : '按需灵活时长'" />
      <van-cell title="下单时间" :value="props.data.createDate" />
      <van-cell title="支付方式" :value="EOrderPayWay[props.data.payType]" />
      <van-cell title="异常状态" v-if="props.data.errorState">
        <view class="c-red">{{ EOrderErrorState[props.data.errorState] }}</view>
      </van-cell>
      <van-cell title="完成日期" v-if="props.data.orderState === 20 && props.data.completeDate" :value="props.data.completeDate" />
      <van-cell title="取消日期" v-if="props.data.orderState === 15 && props.data.cancelDate" :value="props.data.cancelDate" />
      <van-cell title="取消原因" v-if="props.data.orderState === 15 && props.data.cancelReason" :value="props.data.cancelReason" />
    </van-cell-group>
  </view>
</template>
